<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Charackter Counter</title>
<head>
<style type="text/css">
.master_char_counter {
	text-align:center;
	margin:20px auto;
}

.char_counter {
	text-align:left;
	display:inline-block;
	font:bold 12px Verdana;
	padding:10px 5px;
	background:#eee;
	border:1px solid #eee;
	box-shadow:-1px -1px 0 #222,3px 3px 4px #111;
	border-radius:4px;
}

.char_konten {
	color:#900;
	display:block;
	margin:0 0 0 10px;
}

input.char_remaining {
	background:lightblue;
	text-align:center;
	width:40px;
	height:38px;
	border-radius:25px;
	font:normal 16px Verdana;
	border:3px solid #fff;
	margin:0;
	box-shadow:0 0 4px #000;
}

textarea {
	width:500px;
	max-width:500px;
	height:120px;
	background:#fff;
	border:1px solid #444;
	border-radius:5px;
	padding:10px 5px 5px 15px;
	font:normal 16px Courier;
	margin:0;
}

a.linkkiri:link,
a.linkkanan:link {
	padding:2px 6px;
	font:normal 12px Verdana;
	color:orange
;
}
a.linkkiri:visited,
a.linkkanan:visited {
	color:#666;
}
a.linkkiri:hover,
a.linkkanan:hover {
	color:brown;
}
a.linkkiri {
	display:inline-block;
	float:left;
}
a.linkkanan {
	display:inline-block;
	float:right;
}
.post .post-body:after {
	display:none;
}
</style> 

</head>
<body>

<div class="master_char_counter">
  <div class="char_counter">
    <span class="char_konten">
      Character remaining:
      <input  class="char_remaining" disabled size="3" value="150" name="txtLen" id="txtLen"/>
    </span>
    <br/>
    
    <textarea id="textArea" onKeyDown="countChars()" onKeyUp="countChars()" name="textArea" rows="7" value="" cols="50">
    </textarea>
    <br style="clear:both;"/>
    <a class="linkkiri" href="http://gubhugreyot.blogspot.com/" target="_blank" title="tips, tric, tutorial blogger">
      gubhugreyot
    </a>
    <a class="linkkanan" href="http://gubhugcss.blogspot.com/" target="_blank" title="CSS tutorials with demo online">
      gubhug CSS
    </a>
  </div>
</div>

<script type="text/javascript">
function countChars() {
     var l = "150";
     var str = document.getElementById("textArea").value;
     var len = str.length;
     if(len <= l) {
          document.getElementById("txtLen").value=l-len;
     } else {
          document.getElementById("textArea").value=str.substr(0, 150);
     }
}
</script>

</body> 
</html>
